<template>
    <view v-if="itemDiplay" class=" wy-form-text wy-flex-1" :class="[scrollClass,model.theme.box.class]" :style="model.theme.box.style">
        <view class="wy-form-group wy-flex-row wy-form-group-min-height">
            <view :class="[model.theme.group.class,model.multiline?'wy-flex-column':'wy-flex-row wy-align-center']" :style="model.theme.group.style" class="wy-flex-1 wy-form-group-content">
                <view class="wy-form-group-title wy-position-relative wy-flex-row wy-align-center" v-if="model.title" :class="[model.theme.titleBox.class,titleMinWidth,model.multiline?'':'wy-justify-end']" :style="model.theme.titleBox.style">
                    <text class="wy-size-base wy-color-text" :class="[model.theme.title.class]" :style="model.theme.title.style">{{locale(model.title)}}</text> 
                    <text class="wy-size-base wy-color-text" :class="[model.theme.sp.class]" v-if="model.sp">{{model.sp}}</text>
                </view>
				<view v-if="model.multiline && model.remark" class="wy-flex-column">
					<text class="wy-size-s wy-color-second" v-for="(remark,index) in remarkArr" :key="index">{{remark}}</text>
				</view>
                <view class="wy-flex-1 wy-flex-row wy-align-center wy-justify-between wy-ps-tb-ss">
                    <view @click="minStep" v-if="model.showBtnMin" class="wy-ms-right-ss" :class="[model.theme.btnMin.class,btnMinEnable?'':'text-gray']" :style="model.theme.btnMin.style">
                    	<text class="wy-color-text wy-size-base">-</text>
                    </view>
					<input 
					@click="click"
					@input="input"
					class="wy-form-group-input wy-flex-1"
					:name="model.name"
					:class="[model.disabled?'disabled':'',validateClass,model.theme.input.class]" :style="model.theme.input.style"
					v-model="model.value"
					:placeholder="locale(model.placeholder)"
					:disabled="model.disabled"
					:type="model.datatype"
					:password="model.password"
					:maxlength="model.maxlength"
					/>
                    <view v-if="model.showBtnMax" @click="maxStep" class="wy-ms-left-ss" :class="[model.theme.btnMax.class,btnMaxEnable?'':'text-gray']" :style="model.theme.btnMax.style">
                    	<text class="wy-color-text wy-size-base">+</text>
                    </view>
			
                    <view @click="unitClick" v-if="showUnit||model.unit.length||model.theme.unit.class||model.theme.unit.style" :class="[model.theme.unit.class]" :style="model.theme.unit.style" class="unit wy-ms-left-ss">
                    	<slot name="unit"></slot>
                        <text class="wy-color-text wy-size-base">{{locale(model.unit)}}</text>
                    </view>
                    <view class="wy-ms-left-ss" v-if="model.tip">
                        <wy-icon @iconClicked="showTip" name="warn" type="error"></wy-icon> 
                    </view>
					<view class="wy-ms-left-ss" v-if="!model.multiline && model.remark">
					    <wy-icon @iconClicked="showRemark" name="question" type="error"></wy-icon>
					</view>
                </view> 
            </view> 
        </view>
    </view>
</template>

<script>
    import {wyProps} from '../../libs/props.js';
    import {wyItem} from '../../libs/form.js'; 
    export default { 
         name:'wy-form-text-number', 
         mixins: [wyProps,wyItem],
         data(){
             return {
                model:{
                    theme:{
                        box:{class:'',style:''},
                        group:{class:'',style:''}, 
                        titleBox:{class:'',style:''},
                        title:{class:'',style:''},
                        input:{class:'',style:''},
                        sp:{class:'',style:''},
                        unit:{class:'',style:''},
						btnMin:{class:'',style:''},
						btnMax:{class:'',style:''}
                    },
                    datatype:'number',//input 的类型text,number,idcard,digit
                    maxlength:-1,//最大输入长度，设置为 -1 的时候不限制最大长度
                    maxNum:'',
                    minNum:'',
                    stepNum:1,
                    showBtnMax:true,
                    showBtnMin:true,
                }
             }
         },
         computed:{ 
			 btnMaxEnable(){
			 	let {maxNum,minNum,value}=this.model
			 	if(!value){
			 		value='0'
			 	}
			 	if(maxNum===''){
			 		return true
			 	}
			 	else if(parseInt(value)<maxNum){
			 		return true
			 	}
			 	else{
			 		return false
			 	}
			 },
			 btnMinEnable(){
				let {maxNum,minNum,value}=this.model
			 	if(!value){
			 		value='0'
			 	}
			 	if(minNum===''){
			 		return true
			 	}
			 	else if(parseInt(value)>minNum){
			 		return true
			 	}
			 	else{
			 		return false
			 	}
			 }
         },  
         methods:{ 
            mounted__(){
                
              //  console.log(this.model)
            },
			maxStep(){
				let {value,minNum,maxNum,stepNum}=this.model
				if(!value){
					value='0'
				}
				var now=parseInt(value)
				if(this.btnMaxEnable){
					now+=stepNum
				}else{
					return
				}
				if(maxNum!=='' && now>maxNum){
					now = maxNum
				}
				this.setValue(now)
			},
			minStep(){
				let {value,minNum,maxNum,stepNum}=this.model
				if(!value){
					value='0'
				}
				var now=parseInt(value)
				if(this.btnMinEnable){
					now-=stepNum
				}
				else{
					return
				}
				if(minNum !== '' && now<minNum ){
					now = minNum
				}
				this.setValue(now)
			},
			
         }
        
    }
</script>

<style>

</style>
